<template>
  <div class="user-wraper user-page container">
    <div class="logo">
      <router-link to="/">
        <el-image
          :src="$util.isDef(siteInfo.pc_logo_url) ? siteInfo.pc_logo_url : ''"
          fit="cover"
        ></el-image>
      </router-link>
    </div>
    <el-row>
      <div class="login-left">
        <img src="@/assets/images/public/userLoginLeft.png" alt />
      </div>
      <div class="user-right">
        <router-view @currentTab="loginTab" @handleSuccess="handleLoginSuccess"></router-view>
      </div>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      siteInfo: 'projectSetting/getGlobSiteInfo'
    })
  },
  methods: {
    loginTab(name) {
      this.$router.push({
        name: name,
        query: {
          ...this.$route.query
        }
      })
    },
    handleLoginSuccess() {
      let url = this.$util.isEmpty(this.$route.query.redirect) ? '/' : this.$route.query.redirect
      this.$router.replace({ path: url })
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/user.scss';
.user-page {
  min-height: 100vh;
  padding-top: 8vh;
  box-sizing: border-box;
  background-color: #fff;
  .login-left {
    float: left;
    padding-top: 45px;
  }
  .logo {
    margin-bottom: 9vh;
    background-image: url('../../assets/images/public/cicle.png');
    background-repeat: no-repeat;
    min-height: 95px;
    padding-top: 22px;
    padding-left: 69px;
    box-sizing: border-box;
    .el-image {
      height: 39px;
      width: 164px;
    }
  }
  .user-right {
    float: right;
    width: 340px;
    padding: 45px 70px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.08);
  }
}
</style>
